<template>
  <div>
    <div class="action">
      <div>
        <Checkbox
          v-if="showBox"
          v-model="checkAll"
          @on-change="handleAll"
          style="margin-right: 20px"
          >全选</Checkbox
        >
        <Button v-if="showBox" type="error" ghost size="small" @click="delData"
          >删除
          <span v-if="delLength">({{ delLength }})</span>
        </Button>
      </div>
      <Button
        type="error"
        :ghost="showBox ? true : false"
        @click="batchManage"
        >{{ showBox ? "取消管理" : "批量管理" }}</Button
      >
    </div>
    <div class="card" v-if="list.length">
      <div v-for="(item, index) in list" :key="index" class="card-item">
        <Checkbox
          class="checkbox"
          v-model="item.checked"
          v-if="showBox"
          @on-change="handleItem"
        />
        <div @click="goPage(item)">
          <p
            class="cover-photo"
            :style="`background-image:url(${item.coverPath})`"
          ></p>
          <p class="remark">{{ item.seriesName }}</p>
          <div class="bottom">
            <p class="header-name">
              <Avatar :src="item.expertFace" size="small" />
              <span style="margin-left: 10px">{{ item.expertName }}</span>
            </p>
            <p v-if="item.isCharge === '0'" class="is-charge0">免费</p>
            <p v-if="item.isCharge === '1'">
              <span v-if="item.buyFlag === 'false'" class="money"
                ><span>￥</span
                >{{ item.price ? item.price.toFixed(2) : "" }}</span
              >
              <span v-if="item.buyFlag === 'true'" class="is-charge1"
                >已购买</span
              >
            </p>
          </div>
        </div>
      </div>
    </div>

    <empty v-else />

    <div class="page" v-if="list.length">
      <Page
        :total="total"
        @on-change="currentHandle"
        :page-size="params.pageSize"
        show-total
      />
    </div>
  </div>
</template>

<script>
import * as myCollection from "@/api/myCollection.js";
export default {
  name: "course",
  data() {
    return {
      showBox: false, //是否展示多选框
      checkAll: false, //全选
      params: {
        pageNumber: 1,
        pageSize: 8,
        type: "1002001",
      },
      list: [],
      total: 0,
      delLength: 0, //删除数据得个数
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //获取列表数据
    getList() {
      myCollection.selectCollect(this.params).then(({ code, result }) => {
        if (code === 200) {
          this.total = Number(result.total);
          if (result.records) {
            result.records.map((ele) => {
              ele.checked = false;
            });
            this.list = result.records;
          }
        }
      });
    },
    //切换分页
    currentHandle(current) {
      this.params.pageNumber = current;
      this.getList();
    },
    //批量管理
    batchManage() {
      this.showBox = !this.showBox;
      this.list.forEach((item) => {
        item.checked = false;
      });
      this.delLength = 0;
      this.checkAll = false;
    },
    //全选
    handleAll() {
      if (this.checkAll) {
        this.list.forEach((item) => {
          item.checked = true;
        });

        this.delLength = this.list.length;
      } else {
        this.list.forEach((item) => {
          item.checked = false;
        });
        this.delLength = 0;
      }
    },
    //列表单个勾选
    handleItem() {
      this.delLength = this.list.filter((item) => item.checked).length;
    },
    //删除数据
    delData() {
      const selList = this.list.filter((item) => item.checked);
      if (!selList.length) {
        return this.$Message.error("请勾选需要删除的数据");
      }
      this.$Modal.confirm({
        title: "提示",
        content: "是否确认删除所勾选数据？",
        onOk: () => {
          let params = {
            dataIds: selList.map((item) => item.id),
            typeId: "1002001",
          };
          myCollection.cancelCollect(params).then(({ code, result }) => {
            if (code === 200 && result) {
              this.$Message.success("删除成功");
              this.$emit("userInfo");
              this.getList();
              this.showBox = false;
              this.delLength = 0;
            }
          });
        },
        onCancel: () => {},
      });
    },

    //跳转详情
    goPage(item) {
      this.$router.push({
        path: "/courseDetail",
        query: {
          isCharge: item.isCharge,
          payStatus: item.payStatus,
          id: item.id,
        },
      });
      this.$store.commit("SET_PERLEFTMENUSHOW", false);
      sessionStorage.setItem("name", "courseDetail");
    },
  },
};
</script>

<style lang="scss" scoped>
.action {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}
.card {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  justify-items: start;
  justify-content: center;
  .card-item {
    width: 96%;
    height: 275px;
    background: #ffffff;
    box-shadow: 0px 4px 10px 0px #efeded;
    border-radius: 5px;
    margin-top: 15px;
    cursor: pointer;
    position: relative;
    .checkbox {
      position: absolute;
      right: 0px;
      top: 0px;
    }
    .remark {
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 这里是超出几行省略 */
      overflow: hidden;
      color: #52555a;
      margin: 10px 0;
      padding: 0 10px;
      font-size: 14px;
      height: 42px;
    }
    .cover-photo {
      width: 100%;
      height: 180px;
      background-size: cover;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      .header-name {
        color: #63676e;
        font-size: 10px;
        display: flex;
        align-items: center;
      }
      .money {
        margin-left: auto;
        display: block;
        font-size: calc(18 / 1920 * 100vw);
        color: #f4333c !important;
        > span {
          font-size: calc(12 / 1920 * 100vw);
        }
      }
    }
  }
}
.page {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
.ivu-checkbox-wrapper {
  margin-right: 0;
}
.is-charge0 {
  color: #0bd7d7;
  display: block;
  padding: calc(4 / 1920 * 100vw) calc(10 / 1920 * 100vw);
  border-radius: calc(3 / 1920 * 100vw);
  background: #dbf9f9;
  font-size: 12px;
  text-align: center;
  line-height: calc(18 / 1920 * 100vw);
}

.is-charge1 {
  color: #ff900d;
  display: block;
  padding: calc(4 / 1920 * 100vw) calc(10 / 1920 * 100vw);
  border-radius: calc(3 / 1920 * 100vw);
  background: #ffeedb;
  font-size: 12px;
  text-align: center;
  line-height: calc(18 / 1920 * 100vw);
}
</style>
